<template>
  <div>
    <el-table
      :data="dataSources"
      border
      :span-method="objectSpanMethod"
      style="
        width: 99.97%;
        --el-table-border-color: none;
        border-right: 1px #2f4553 solid;
        border-left: 1px #2f4553 solid;
        border-bottom: 1px #2f4553 solid;
      "
      :highlight-current-row="false"
      :header-cell-style="{
        backgroundColor: '#1a2c38',
        color: '#ffffff',
        fontSize: '14px',
        textAlign: 'center',
        borderLeft: '0.5px #2f4553 solid',
        borderTop: '0.5px #2f4553 solid',
        borderBottom: '1px #2f4553 solid'
      }"
      :cell-style="{
        color: '#fff',
        fontSize: '14px',
        textAlign: 'center',
        borderBottom: '0.5px #2f4553 solid',
        borderLeft: '0.5px #2f4553 solid',
        backgroundColor: '#1a2c38'
      }"
      :row-style="{
        color: '#fff',
        fontSize: '14px',
        textAlign: 'center'
      }"
      class-name="my-custom-table"
    >
      <!-- <el-table-column
        prop="name"
        align="center"
        :label="$t('page.vip.level')"
        min-width="80"
      />
        <el-table-column
          prop="provider_name"
          align="center"
          :label="$t('page.vip.cumulativeAmount')"
          min-width="100"
        />
        <el-table-column
          prop="reward"
          align="center"
          min-width="100"
          :label="$t('page.vip.bonusGold')"
        />  -->
      <el-table-column
        v-for="column in columns_"
        :key="column.prop"
        :prop="column.prop"
        :label="_$t(column.label)"
        :min-width="column.width"
      >
        <!-- 插槽：单元格 -->
        <template #default="{ row }">
          {{ row[column.prop] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref, watch } from "vue";
const props = defineProps({
  activeTabPath: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  activeTab: {
    type: String,
    default: ""
  },
  isMerge: {
    type: Boolean,
    default: true
  }
});
console.log("propsactiveTabPath", props);

let currentName = "";
let nameSpans = {};
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (!props.isMerge) {
    return {
      rowspan: 1,
      colspan: 1
    };
  }
  if (columnIndex === 0) {
    // 只合并第一列
    // 假设每一组具有相同name的行都连续排列，并且它们的dataLength相同
    // 在这种情况下，我们可以直接根据dataLength来合并行
    if (rowIndex % row.dataLength === 0) {
      // 只有当rowIndex是dataLength的倍数时，才返回合并的行数
      // 注意：这假设了每组连续的行都是从0或dataLength的倍数开始的
      return {
        rowspan: row.dataLength,
        colspan: 1
      };
    } else {
      // 对于不是dataLength倍数的行，我们不希望它们显示在第一列
      // 因此，我们返回0的rowspan，但实际上在Element Plus中，我们可能需要返回1来避免渲染问题
      // 但在这种情况下，由于我们的数据是连续的，并且我们已经处理了合并，所以这些行将不会显示在第一列（因为它们被合并了）
      // 但为了保险起见，我们还是返回1，因为Element Plus可能不允许rowspan为0
      return {
        rowspan: 0, // 在Element Plus中实际上应该返回1，因为0会导致渲染问题
        colspan: 1
      };
      // 注意：在真实应用中，你可能不需要为这些行返回任何内容，
      // 因为它们会被合并到前面的行中。但是，由于Element Plus的渲染方式，
      // 你可能需要为每一行都返回一个rowspan/colspan对象，即使有些行是“隐藏”的。
      // 在这个例子中，由于我们假设了数据是连续的，并且已经通过rowIndex % dataLength来处理了合并，
      // 所以我们实际上不需要为这些“隐藏”的行返回任何特殊的rowspan值（除了可能返回1来避免渲染问题）。
      // 然而，为了简化示例，我们在这里返回了{ rowspan: 0, colspan: 1 }，
      // 但在实际项目中，你应该只为那些应该显示在第一列的行返回非零的rowspan值。
    }
  }
  return {
    rowspan: 1,
    colspan: 1
  };
};
const dataSources = ref([]);
watch(
  () => props.activeTabPath,
  newVal => {
    dataSources.value = newVal;
  },
  {
    deep: true,
    immediate: true
  }
);

const columns_ = ref(props.columns);

watch(
  () => props.columns,
  newVal => {
    columns_.value = newVal;
  },
  {
    deep: true
    // immediate: true
  }
);

const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();

const _$t = label => {
  if (!label) return "";
  return globalProperties.$t(label);
};
</script>

<style lang="scss" scoped>
/*  
// 表格部分样式
 // 最外层透明 */
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: #1a2c38;
  color: #1a2c38;
  font-size: 24px;
}
.el-table :deep(.el-table__cell) {
  padding: 18px 0;
}
/* 表格内背景颜色  */
:deep(.el-table) th,
:deep(.el-table) tr,
:deep(.el-table) td {
  background-color: #1a2c38;
  border: 0px;
  color: #1a2c38;
  font-size: 24px;
  height: 5px;
  font-family:
    Source Han Sans CN Normal,
    Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}

/* // 去掉最下面的那一条线  */
.el-table::before {
  height: 0px;
}

/* // 设置表格行高度 */
:deep(.el-table__body) tr,
:deep(.el-table__body) td {
  padding: 0;
  height: 44px;
}

/* // 修改高亮当前行颜色 */
:deep(.el-table) tbody tr:hover > td {
  background: #1a2c38 !important;
}

/* // 取消当前行高亮 */
:deep(.el-table) tbody tr {
  pointer-events: none;
}

/* 修改表头样式-加边框 */
/* ::v-deep .el-table__header-wrapper {
  border: solid 1px #04c2ed;
} */

/* // 表格斑马自定义颜色 */
:deep(.el-table__row.warning-row) {
  background: #1a2c38;
}

/* 去掉表格里的padding */
:deep(.el-table) .cell,
.el-table th div {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
